<template>
  <div id="login">
    <div class="left"></div>
    <div class="login-container">
      <div class="header"></div>
      <div class="login-box">
        <div class="js-sign-in-container">
          <h4 class="title">管理后台登录</h4>
          <div class="form">
            <el-form>
              <el-form-item label="账号">
                <el-input
                  class="login-input"
                  v-model.trim="phone"
                  maxlength="11"
                  prefix-icon="el-icon-user"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                  class="login-input"
                  show-password
                  v-model.trim="password"
                  prefix-icon="el-icon-lock"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="验证码" class="verification-code">
                <el-input
                  class="login-input"
                  v-model.trim="validationCode"
                  prefix-icon="el-icon-lock"
                  placeholder="请输入验证码"
                  @keydown.enter.native="loginRequest"
                >
                  <template slot="append">
                    <img
                      :src="img"
                      alt=""
                      class="code-img"
                      @click="getImgCode()"
                    />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>

            <div class="sign-in-button">
              <el-button
                type="primary"
                :loading="loading"
                :disabled="loading"
                @click="loginRequest()"
                >登 录</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="icp">
        <a href="https://beian.miit.gov.cn" target="_blank"
          >浙ICP备19038329号-1</a
        >
      </div>
    </div>
  </div>
</template>
  <script>
import base from "@/assets/js/base";
import { requestApiPost, requestApiCodePost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "login",
  data() {
    return {
      validationCode: "",
      phone: "",
      password: "",
      img: "",
      loading: false,
    };
  },
  methods: {
    //登录
    loginRequest() {
      var reqData = {
        userName: this.phone,
        password: this.password,
        rand: this.validationCode,
        randImgReqSeq: sessionStorage.getItem("randImgReqSeq"),
      };
      this.loading = true;
      let reqReport = reqRep({ traCode: "_LOGIN_USER", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
          this.loading = false;
          this.getImgCode();
        } else {
          this.$message.success("登录成功");
          //登录判断
          //userId 1是平台管理员（所有权限），2､3是审核员，4-10是操作员，11及以上其它（个人）
          //身份判断
          //userType 0-平台管理员，1-公司，2-个人，3-管理方，4-审核员，5-操作员 6-财务

          //KEY: 1=>A  2、3=>C  4-10=>O

          let url = "";
          let userName = "";

          switch (resReport.data.userType) {
            case "0":
              //平台管理员（所有权限）
              userName = "平台管理员";
              sessionStorage.setItem("KEY", "A");
              url = base.getMenu("admin")[0].url;
              break;
            case "1":
              //公司
              userName = "公司";
              sessionStorage.setItem("KEY", "company");
              url = base.getMenu("company")[0].url;
              break;
            case "2":
              //个人
              userName = "个人";
              sessionStorage.setItem("KEY", "personage");
              url = base.getMenu("user")[0].url;
              break;
            case "3":
              //平台管理员（所有权限）
              userName = "平台管理员";
              sessionStorage.setItem("KEY", "A");
              url = base.getMenu("admin")[0].url;
              break;
            case "4":
              //审核员
              userName = "审核员";
              sessionStorage.setItem("KEY", "C");
              url = base.getMenu("check")[0].url;
              break;
            case "5":
              //操作员
              userName = "操作员";
              sessionStorage.setItem("KEY", "O");
              url = base.getMenu("operator")[0].url;
              break;
            case "6":
              //财务
              userName = "财务";
              sessionStorage.setItem("KEY", "F");
              url = base.getMenu("finance")[0].url;
              console.log(base.getMenu("finance"));
              break;
          }
          resReport.data.userName = userName;
          sessionStorage.setItem("selectIndex", 0);
          sessionStorage.setItem("login", JSON.stringify(resReport.data));

          this.$router.push(url);
          this.loading = false;
        }
      });
    },
    forgetPasswordJump() {
      this.$router.push("forgetPassword");
    },
    register() {
      this.$router.push("register");
    },
    //获取图形验证码
    getImgCode() {
      var reqData = {};
      let reqReport = reqRep({ traCode: "", data: reqData });
      requestApiCodePost(reqReport).then((res) => {
        if (res.status == 200) {
          let dataStr = this.transformArrayBufferToBase64(res.data);
          this.img = "data:image/png;base64," + dataStr;
        } else {
          this.$message({
            message: res.statusText,
            type: "error",
          });
        }
      });
    },
    //文件流装换成base64
    transformArrayBufferToBase64(buffer) {
      var binary = "";
      var bytes = new Uint8Array(buffer);
      for (var len = bytes.byteLength, i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
    },
  },

  created() {
    this.loading = false;
    sessionStorage.clear();
    this.getImgCode();
  },
};
</script>
  
    <style scoped>
#login {
  position: relative;
  height: 100vh;
  min-width: 768px;
}
.left {
  position: absolute;
  height: 100%;
  width: 60%;
  background-image: url(../assets/img/login-left.png);
  background-size: 100% 100%;
}
.login-container {
  position: absolute;
  right: 0;
  height: 100%;
  width: 40%;
  /* min-width: 400px; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header {
  height: 60px;
}
.login-box {
  display: flex;
  align-items: center;
  width: 408px;
  flex: 1;
}

.login-box .title {
  font-size: 40px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 2px;
  color: #333;
}

.public {
  margin-bottom: 30px;
}
.verification-code {
  position: relative;
  margin-bottom: 12px;
  height: 50px;
}
.code-img {
  cursor: pointer;
  background-color: #fbfbfb;
}

.code-input {
  width: 150px;
}

.login-box .js-sign-in-container {
  flex: 1;
}
.form {
  margin-top: 64px;
}
.el-form {
  margin-bottom: 62px;
}
.sign-in-button{
  padding: 14px;
}
.sign-in-button .el-button--primary {
  width: 100%;
}

.icp {
  height: 60px;
}

.icp a {
  display: block;
  width: 408px;
  text-align: center;
  color: #999;
}

.role-class {
  position: relative;
}
.role-class .el-icon-help {
  position: absolute;
  left: 5px;
  top: 58px;
  z-index: 3;
  font-size: 20px;
  width: 40px;
  color: #c0c4cc;
  text-align: center;
}

/**平板 */
@media (min-width: 768px) {
  .login-box {
    width: 350px;
  }
  .login-box .title {
    font-size: 30px;
  }
}
@media (min-width: 992px) {
  .login-box {
    width: 350px;
  }
  .login-box .title {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .login-box {
    width: 408px;
  }
  .login-box .title {
    font-size: 40px;
  }
}
</style>
    
    
  